<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="author" content="Steper Kuo">
	<title>Hover-Grid-border</title>

	<!-- Link *** CSS  -->
	<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com/assets/css/docs.theme.min.css">
	<!-- Link Demo *** CSS-->
	<link rel="stylesheet" href="grid-border.css">

	<!--Jquery.js, HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	<![endif]-->
</head>
<body>
<!-- header -->
<header class="header">
	<div class="row">
		<div class="large-12 columns">
			<div class="brand left">
				<h3>
					<a href="/">Hover-Grid-border</a>
				</h3>
			</div>
			<a id="toggle-nav" class="right">
				<span></span> <span></span> <span></span>
			</a>
			<div class="nav-bar">
				<ul class="clearfix">
				</ul>
			</div>
		</div>
	</div>
</header>

<!-- title -->
<section class="title">
	<div class="row">
		<div class="large-12 columns">
			<h1>Basic</h1>
		</div>
	</div>
</section>

<!--  Demos -->
<section id="demos">
	<div class="row">
		<div class="large-12 columns">
			<!--Demo's html here-->
			<div id="demoContent">
				<div class="folder">
					<p>Trying of mine (NoN - Box sizing)</p>

					<div class="first">
						<p> Border : 实现边框效果（margin平移）</p>

						<div class="grid-border">
							<div class="grid-row">
								<div class="grid-column"><span>1</span></div>
								<div class="grid-column"><span>2</span></div>
								<div class="grid-column"><span>3</span></div>
								<div class="grid-column"><span>4</span></div>
							</div>
							<div class="grid-row">
								<div class="grid-column"><span>5</span></div>
								<div class="grid-column"><span>6</span></div>
								<div class="grid-column"><span>7</span></div>
								<div class="grid-column"><span>8</span></div>
							</div>
							<div class="grid-row">
								<div class="grid-column"><span>9</span></div>
								<div class="grid-column"><span>10</span></div>
								<div class="grid-column"><span>11</span></div>
								<div class="grid-column"><span>12</span></div>
							</div>
							<div class="grid-row">
								<div class="grid-column"><span>13</span></div>
								<div class="grid-column"><span>14</span></div>
								<div class="grid-column"><span>15</span></div>
								<div class="grid-column"><span>16</span></div>
							</div>
						</div>
					</div>

					<div class="second">
						<p>Padding ：实现边框效果（margin平移）</p>

						<div class="grid-padding">
							<div class="grid-row">
								<div class="grid-column"><span>1</span></div>
								<div class="grid-column"><span>2</span></div>
								<div class="grid-column"><span>3</span></div>
								<div class="grid-column"><span>4</span></div>
							</div>
							<div class="grid-row">
								<div class="grid-column"><span>5</span></div>
								<div class="grid-column"><span>6</span></div>
								<div class="grid-column"><span>7</span></div>
								<div class="grid-column"><span>8</span></div>
							</div>
							<div class="grid-row">
								<div class="grid-column"><span>9</span></div>
								<div class="grid-column"><span>10</span></div>
								<div class="grid-column"><span>11</span></div>
								<div class="grid-column"><span>12</span></div>
							</div>
							<div class="grid-row">
								<div class="grid-column"><span>13</span></div>
								<div class="grid-column"><span>14</span></div>
								<div class="grid-column"><span>15</span></div>
								<div class="grid-column"><span>16</span></div>
							</div>
						</div>
					</div>
				</div>
				<br>
				<div class="folder">
					<p>Others method: <b>non box-sizing</b></p>
					<div class="wrap">
						<div class="item">1</div>
						<div class="item">2</div>
						<div class="item">3</div>
						<div class="item">4</div>
						<div class="item">5</div>
						<div class="item">6</div>
						<div class="item">7</div>
						<div class="item">8</div>
						<div class="item">9</div>
					</div>
					<br>
					<p>Others method: <b>box-sizing</b></p>
					<div class="wrap box">
						<div class="item">1</div>
						<div class="item">2</div>
						<div class="item">3</div>
						<div class="item">4</div>
						<div class="item">5</div>
						<div class="item">6</div>
						<div class="item">7</div>
						<div class="item">8</div>
						<div class="item">9</div>
					</div>
				</div>
			</div>
			<h3 id="overview">Overview</h3>
			<!--Introduction here-->
			<p>
				Hover in grid, set border colorful.<br>
				Recommend:<br>
				<code>.wrap .item
					{
					position: relative;
					float: left;
					margin-left: -10px;
					margin-top: -10px;
					width: 80px;
					height: 80px;
					line-height: 80px;
					text-align: center;
					border: 10px solid #ccc;
					}
					.wrap.box .item
					{
					line-height: 60px;
					}
					.wrap .item:hover
					{
					z-index: 2;
					border-color: #f00;
					}
				</code>
			</p>
			<h3 id="setup">Setup</h3>
			<pre><code id="setupCode"></code></pre>
			<h3 id="html">html</h3>
			<pre><code id="htmlCode"></code></pre>
		</div>
	</div>
</section>

<!-- footer -->
<footer class="footer">
	<div class="row">
		<div class="large-12 columns">
			<h5>
				<a href="/">Steper Kuo</a>
				<a id="custom-tweet-button" href="https://twitter.com/share?url=http://www.baidu.com&text=Email:gyx8899@126.com" target="_blank"></a>
			</h5>
		</div>
	</div>
</footer>
<!-- Script *** JS -->
<script src="http://www.owlcarousel.owlgraphic.com/assets/vendors/highlight.js"></script>
<script src="http://www.owlcarousel.owlgraphic.com/assets/js/app.js"></script>

<!-- Script Demo *** JS -->
<script src=""></script>

<script id="documentReadyCode">
	$(document).ready(function ()
	{

	});
</script>
<script>
	function escapeHtml(text)
	{
		var map = {
			'&': '&amp;',
			'<': '&lt;',
			'>': '&gt;',
			'"': '&quot;',
			"'": '&#039;'
		};

		return text.replace(/[&<>"']/g, function (m)
		{
			return map[m];
		});
	}
	document.getElementById('htmlCode').innerHTML = escapeHtml(document.getElementById('demoContent').outerHTML);
	document.getElementById('setupCode').innerHTML = escapeHtml(document.getElementById('documentReadyCode').innerHTML);
</script>
</body>
</html>